<div class="goodsInvoiceCateManageDiv">
  <div class="searchDiv">
    <div class="searchItem" id="pullDown">
      <div class="modal-line click-order-search">
        <label for="invoiceCateSearch">开票分类：</label>
        <input type="text" #searchFor1 class="form-control inp" placeholder="输入开票分类搜索" (focus)="IsActivity = true" (blur)="IsActivity = false"
          (keyup)="getListFunc(searchFor1.value)" [(ngModel)]="categoryName">
      </div>
      <div class="dropDownList modal-line click-order-search" *ngIf="IsActivity">
        <ul class="click-order-search-list click-order-search-multiList">
          <li *ngFor="let invoice of invoiceSearchList" (mousedown)="addListFunc(invoice.name)">
            <span>{{invoice.name}}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="searchItem">
      <label for="">商品：</label>
      <input type="text" placeholder="输入商品sn/名查询" [(ngModel)]="goodsName" class="form-control">
    </div>
    <div class="searchItem">
      <label for="invoiceConfigSearch">是否配置开票分类：</label>
      <select name="" id="invoiceConfigSearch" [(ngModel)]="hasCategory" class="form-control">
        <option value="2">全部</option>
        <option value="1">是</option>
        <option value="0">否</option>
      </select>
    </div>
  </div>
  <div class="btnDiv">
    <button (click)="searchFn()">查询</button>
    <button (click)="checkAll()">全选</button>
    <button (click)="showUpdateModel('')">编辑</button>
    <button>
      <a href="../../../../assets/批量导入商品开票分类.xlsx">下载导入模板</a>
    </button>
    <button (click)="showBatchModel()">批量导入</button>
  </div>
  <form class="tableBox" border="1">
    <table>
      <thead class="title">
        <tr>
          <td>
            <!-- <input type="checkbox" id="chkAll" (click)="checkAll()"> -->
          </td>
          <td>最后更新时间</td>
          <td>商品sn</td>
          <td>商品sku名</td>
          <td>开票分类</td>
          <td>纳税分类编码</td>
          <td>税率</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let row of rows; let i = index">
          <td>
            <input type="checkbox" name="isChecked{{i}}" [(ngModel)]="row.isChecked">
          </td>
          <td><span *ngIf="!row.updatedTim">{{row.updatedTime | date:'yyyy-MM-dd HH:mm:ss'}}</span></td>
          <td style="width:15%">{{row.sn}}</td>
          <td style="width:20%">{{row.name}}</td>
          <td style="width:15%">
            <span *ngIf="row.categoryName">{{row.categoryName}}</span>
            <span *ngIf="!row.categoryName" class="redColor">未配置</span>
          </td>
          <td style="width:10%">
            <span *ngIf="row.taxClassification">{{row.taxClassification}}</span>
            <span *ngIf="!row.taxClassification" class="redColor">未配置</span>
          </td>
          <td style="width:10%">
            <span *ngIf="row.taxRate || row.taxRate == 0">{{row.taxRate}}</span>
            <span *ngIf="row.taxRate != 0 && !row.taxRate" class="redColor">未配置</span>
          </td>
          <td style="width:15%">
            <a (click)="showUpdateModel(row.sn)">编辑</a>
          </td>
        </tr>
      </tbody>
    </table>
  </form>
  <pagination *ngIf="rows" class="pagination-sm" [(ngModel)]="page" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage"
    [maxSize]="maxSize" [boundaryLinks]="true" [rotate]="false" [firstText]="localText.firstBtn" [lastText]="localText.lastBtn"
    [previousText]="localText.previousBtn" [nextText]="localText.nextBtn" (pageChanged)="onChangeTable($event)" (numPages)="numPages = $event">
  </pagination>
  <pre *ngIf="rows" class="card card-block card-header">页数: {{page}} / {{numPages}}</pre>
</div>

<!-- 编辑开票分类 -->
<div id="editGoodsInvoiceBox" class="modalBoxHide">
</div>
<div id="editGoodsInvoiceContainer" class="modalBoxHide">
  <div class="editInvoiceTitle">编辑商品开票分类</div>
  <div class="searchItem" id="pullDown">
    <div class="modal-line click-order-search">
      <label for="invoiceCateSearch">开票分类：</label>
      <input type="text" #searchFor2 class="form-control inp" placeholder="输入开票分类搜索" (focus)="IsShow = true" (blur)="IsShow = false"
        (keyup)="getSearchCategoryList(searchFor2.value)" [(ngModel)]="selectCategoryName">
    </div>
    <div class="dropDownList modal-line click-order-search" *ngIf="IsShow">
      <ul class="click-order-search-list click-order-search-multiList">
        <li *ngFor="let invoice of invoiceSearchListEdit" (mousedown)="addSelectItem(invoice.name,invoice.id)">
          <span>{{invoice.name}}</span>
        </li>
      </ul>
    </div>
  </div>
  <div class="editInvoiceBtn">
    <button (click)="cancle()">取消</button>
    <button (click)="updateGoodsInvoiceCate()">保存</button>
  </div>
</div>

<!-- 批量导入弹框 -->
<div id="uploadMask" class="modalBoxHide">
</div>
<div id="upload" class="modalBoxHide">
  <div class="modal-header">
    <h4 class="modal-title pull-left">批量导入开票分类</h4>
    <button type="button" class="close pull-right" (click)="cancelUpload()" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="form-group form-inline">
    <span class="control-label width-125">上传模板数据：</span>
    <a class="action-btn">浏览
      <input type="file" id="excelUploader" ng2FileSelect class="inputFile" [uploader]="excelUploader">
    </a>
    <button class="action-btn" ng-disabled="btnEnabled" (click)="uploadFile()">上传</button>
  </div>
  <div class="form-group">
    <button type="submit" class="confirm-btn" (click)="saveUpload()">确定提交</button>
  </div>
</div>